<template>
<div class="shoppingCartContainer">
  <div class="shoppingCartContent">
    <table class="table-container">
      <thead>
      <tr style="height: 50px;background-color:#fff;font-weight: 700;">
        <td style="width: 62px">
          <div class="ck-wrap ck-all fl j_operate" data-op="select_all">
            <el-checkbox
                v-model="checkForm[0]"
                style="width: 30px;font-weight: 700"
                label="全选"
            />
          </div>
        </td>
        <td style="width: 352px">商品</td>
        <td style="width: 216.2px">属性</td>
        <td style="width: 97.49px">单价</td>
        <td style="width: 102px">数量</td>
        <td style="width: 97.49px">小计</td>
        <td style="width: 92.83px">操作</td>
      </tr>

      </thead>
      <div style="height: 70px;font-weight: 700;">
        <span style="position: absolute;top: 230px;left: 200px;">360商城自营</span>
      </div>
      <tr v-for="(com,index) in userShoppingCartCommodities" :key="com.id"
          style="background-color:#fff;height: 106.4px;border-spacing: 0 10px;">
        <td>
          <el-checkbox
              v-model="checkForm[index+1]"
              style="width: 30px;font-weight: 700"
              label="选择"
          />
        </td>
        <td style="display: flex;justify-content: center">
          <img :src="com.commodity.img" width="80" style="margin-top: 10px;cursor:pointer;"/>
          <div style="width: 200px;margin-top: 30px;font-size: 14px">
            {{com.commodity.name}}
          </div>

        </td>
        <td style="font-size: 14px">{{com.categoryName}}</td>
        <td style="font-size: 14px">{{com.commodity.price}}</td>
        <td style="font-size: 14px">{{com.count}}</td>
        <td style="font-size: 14px;color: red">￥{{com.count * com.commodity.price}}</td>
        <td>
            <a @click="deleteShoppingCart(com.id)" class="deleteShoppingCart">删除</a>
        </td>
      </tr>
    </table>
    <div style="height: 30px"></div>
    <div class="cashContainer">
      <div style="display: flex;float: right;padding-top: 10px;">
        <div>
          <span>已选</span>
          <span style="color: red">{{checkCount}}件</span>
          <span>商品</span>
          <span style="font-weight: 700;color: red;margin-left: 10px">合计：￥{{allPrice}}元</span>
        </div>
        <div style="margin-left: 20px">
          <button
              @click="cost"
              style="border: 0;color: white;background-color:rgba(255,51,51,1);;width: 160px;height: 50px;border-radius: 10px;cursor:pointer;">去结算</button>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref, watch} from "vue";
import shoppingCartAPI from "../../api/shoppingCart";
import {userStore} from "../../store/userStore";
import {shoppingCartModel} from "../../model/shoppingCartModel";
import shoppingCart from "../../api/shoppingCart";
import {ElMessage} from "element-plus";
import router from "../../router";

const userStoreImpl = userStore();

const checkCount = ref(0)
const allPrice = ref(0.0);

const checkForm = ref([])

const userShoppingCartCommodities = ref<shoppingCartModel[]>();

const deleteShoppingCart = (id) => {
  shoppingCart.delete(id)
      .then(res => {
        if (res && res.data.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        } else {
          ElMessage({
            type: 'success',
            message: '删除失败'
          })
        }
      }).finally(() => {
    initData();
  })
}

const cost = () => {
  for (let i = 1 ; i <= userShoppingCartCommodities.value?.length ; i++){
    if (checkForm.value[i]) {
      break;
    }
    if (i == userShoppingCartCommodities.value?.length) {
      ElMessage({
        type: 'warning',
        message: '请选择商品'
      })
      return;
    }
  }

  window.location.href = '/cost'
}

watch(checkForm , (nv) => {
  if (checkForm.value[0]) {
    for (let i = 1 ; i <= userShoppingCartCommodities.value?.length ; i++){
      checkForm.value[i] = true;
    }
    checkCount.value = <number>userShoppingCartCommodities.value?.length;
  } else {
    let curCount = 0;
    checkForm.value[0] = false;
    for (let i = 1 ; i <= userShoppingCartCommodities.value?.length ; i++){
      if (checkForm.value[i]) {
        curCount ++;
      } else {
        if (curCount > 0) {
          curCount --;
        }
      }
    }
    checkCount.value = curCount;
  }


  let ans = 0.0;
  for (let i = 0 ; i < userShoppingCartCommodities.value?.length ; i++) {
    console.log('======================' , checkForm.value[i])
    if (checkForm.value[i+1] == true) {
      let com = userShoppingCartCommodities.value?.at(i);
      console.log(com)
      ans += com.count * com.commodity.price;
    }
  }
  allPrice.value = ans;

}, {deep : true})

const initData = () => {
  if (userStoreImpl.user.id) {
    shoppingCartAPI.getCommodityByUserId(userStoreImpl.user.id)
        .then(res => {
          const data = res.data.data;
          console.log(data);
          if (res.data.code == 200 && data) {
            userShoppingCartCommodities.value = data.shoppingCart;
            checkForm.value = new Array(userShoppingCartCommodities.value?.length+1)
          }
        })
        .finally(() => console.log(userShoppingCartCommodities.value))
  }
}

onMounted(() => {
  initData();
})
</script>

<style scoped>
.shoppingCartContainer{
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.shoppingCartContent{
  width: 1180px;
  margin-top: 20px;
}
tr>td{
  text-align: center;
  border-spacing: 0px;
}
table {
  border: 0;
  border-collapse: collapse;
}
.table-container {
  margin-bottom: 20px;
}

.cashContainer{
  width: 1021px;
  height: 71px;
  background-color: #fff;
}
.deleteShoppingCart{
  cursor: pointer;
}
.deleteShoppingCart:hover{
  color: red;
}
</style>
